<template>
    <div class="docx-preview-wrap">
        <div id="bodyContainer"></div>
    </div>
</template>
   
<script>
import { defaultOptions, renderAsync } from "docx-preview";
console.log(defaultOptions);
export default {
    name: 'DocxPreview',
    data() {
        return {
            docxOptions: {
                className: "kaimo-docx-666", // string：默认和文档样式类的类名/前缀
                inWrapper: true, // boolean：启用围绕文档内容的包装器渲染
                ignoreWidth: false, // boolean：禁用页面的渲染宽度
                ignoreHeight: false, // boolean：禁止渲染页面高度
                ignoreFonts: false, // boolean：禁用字体渲染
                breakPages: true, // boolean：在分页符上启用分页
                ignoreLastRenderedPageBreak: true, // boolean：在 lastRenderedPageBreak 元素上禁用分页
                experimental: false, // boolean：启用实验功能（制表符停止计算）
                trimXmlDeclaration: true, // boolean：如果为true，解析前会从​​ xml 文档中移除 xml 声明
                useBase64URL: false, // boolean：如果为true，图片、字体等会转为base 64 URL，否则使用URL.createObjectURL
                useMathMLPolyfill: false, // boolean：包括用于 chrome、edge 等的 MathML polyfill。
                showChanges: false, // boolean：启用文档更改的实验性渲染（插入/删除）
                debug: false, // boolean：启用额外的日志记录
            }
        };
    },
    mounted() {
        // let path = 'http://192.168.101.14:19000/public/%E6%88%90%E9%83%BD%E7%A0%94%E5%8F%91%E4%B8%AD%E5%BF%83%E8%B0%83%E5%BA%A6%E5%B0%8F%E7%BB%842023%E5%B9%B44%E6%9C%88%E5%B7%A5%E4%BD%9C%E5%AE%8C%E6%88%90%E6%83%85%E5%86%B5.docx'
        let path = 'http://192.168.101.14:19000/public/test.docx'
        
        let xhr = new XMLHttpRequest();
        xhr.open('GET', path, true);
        xhr.responseType = 'arraybuffer';

        xhr.onload = () => {
            if (xhr.status === 200) {
                let buffer = xhr.response;
                this.docxRender(buffer);
            }
        };

        xhr.send();
    },
    methods: {
        // 渲染docx
        docxRender(buffer) {
            let bodyContainer = document.getElementById("bodyContainer");
            renderAsync(
                buffer, // Blob | ArrayBuffer | Uint8Array, 可以是 JSZip.loadAsync 支持的任何类型
                bodyContainer, // HTMLElement 渲染文档内容的元素,
                null, // HTMLElement, 用于呈现文档样式、数字、字体的元素。如果为 null，则将使用 bodyContainer。
                this.docxOptions // 配置
            ).then(res => {
                console.log("res---->", res)
            })
        }
    },
};
</script>